<template>
    <MyDialog ref="myDialog" title="新增角色" width="600px" :on-confirm="confirm" :on-cancel="clearData">
        <MyForm ref="myForm" :form-data="formData" :form-item-list="formItemList" :form-rules="formRules"></MyForm>
    </MyDialog>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
interface FormData {
    id?: string;
    name: string;
    remark: string;
    permissionList: string[];
}

const emit = defineEmits<{
    (event: 'complete', value: boolean): void;
}>();

const formData = ref<FormData>({
    id: '',
    name: '',
    remark: '',
    permissionList: [],
});

const formItemList = ref<MyComment.FormItemProps<FormData>[]>([
    {
        prop: 'name',
        label: '角色名称',
        contentProps: { maxlength: 20, placeholder: '请输入1-20个字符' } as MyComment.FormItemContentProps['input'],
    },
    {
        prop: 'remark',
        label: '备注',
        contentProps: { maxlength: 128, placeholder: '长度不能超过128个字符', type: 'textarea', resize: 'none', rows: 5 } as MyComment.FormItemContentProps['input'],
    },
    {
        prop: 'permissionList',
        label: '角色权限',
        type: 'checkbox',
        data: [],
        contentExtends: { width: '120px' } as MyComment.FormItemContentExtends['checkbox'],
    },
]);

const formRules: MyComment.FormRules<FormData> = {
    name: { required: true, trigger: 'blur', message: '请输入角色名称' },
    permissionList: { required: true, trigger: 'blur', message: '请选择角色权限' },
};

const myDialog = ref<MyComment.DialogInstance>();
const myForm = ref<MyComment.FormInstance<FormData>>();

const getPermissionList = async () => {
    const res = await MyService.account.getPermissionList({ searchKey: '', current: 1, size: 10 });
    if (res.code === 200 && Array.isArray(res.data.records)) {
        formItemList.value[2].data = res.data.records.map((item) => ({ label: item.title || '', value: item.id || '' }));
    } else {
        formItemList.value[2].data = [];
    }
};

const confirm = async (): Promise<boolean> => {
    let result = (await myForm.value?.validate()) || false;
    if (result) {
        const data = myForm.value?.getData();
        if (data) {
            const submitData: any = {
                name: data.name,
                remark: data.remark,
                permissionsList: data.permissionList,
            };
            let res = null;
            if (data.id) {
                submitData.id = data.id;
                res = await MyService.account.updateRole(submitData);
            } else {
                res = await MyService.account.createRole(submitData);
            }
            if (res.code === 200) {
                emit('complete', true);
                return true;
            } else {
                ElMessage.error({
                    message: res.msg || '新增用户失败',
                });
                emit('complete', false);
                return false;
            }
        } else {
            emit('complete', false);
            return false;
        }
    }
    return result;
};

const open = (data?: any) => {
    if (data) {
        formData.value = {
            id: data.id,
            name: data.name,
            remark: data.remark,
            permissionList: data.permissionList,
        };
        console.log(data.permissionList);
    }
    myDialog.value?.open();
    // myForm.value?.clearValidate();
};

const clearData = () => {
    // myForm.value?.clearData();
};

defineExpose({
    open,
});

onMounted(() => {
    getPermissionList();
});
</script>

<style scoped></style>
